<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script  type="text/javascript" src="${pageContext.request.contextPath }\statics\js\jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#detai").blur(function(){

                var password =$(".password").val();
                var uPhone=$(".text").val();
                var reg = /^1[3|4|5|7|8][0-9]{9}$/;
                if(!reg.test(uPhone)) {
                    alert('请输入有效手机号');
                    return false;
                }else {
                    $.post("${pageContext.request.contextPath }/check",{uPhone:uPhone,password:password},function(result){
                        if(result==false){
                            alert("手机号不存在,请先注册！")
                        }
                    },"JSON" )

                }

            })
        })
    </script>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .body{

            overflow:hidden;
            width:100%;
        }
        .center{


            margin-left: auto;
            margin-right: auto;
        }
        .content{
            width: 400px;
            height: 500px;
            background-color: white;
            box-shadow: 0 0 10px 2px #333;
        }
        .nav-center{
            width: 300px;
            height: 100px;
            font-size: 22px;
            text-align: center;

        }
        .zhanghao{
            display: inline-block;
            line-height: 100px;
            color: rgb(212, 127, 71);
        }
        .face{
            width: 300px;
            height: 400px;
            position: relative;
        }
        .face>div{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0%;
            top: 0%;
            background-color: #fff;
        }
        .logn{
            z-index: 100;
        }
        .saoma img{
            width: 80%;
            margin-top: 18px;
            margin-left: 37px;
        }
        .detail-one{
            text-align:center;
            font-size: 12px;
        }
        .form{
            height: 210px;
        }
        .text{
            width: 300px;
            height: 50px;
            border: 1px solid silver;
            text-indent: 20px;
        }
        .password{
            margin-top: 20px;
            width: 300px;
            height: 50px;
            border: 1px solid silver;
            text-indent: 20px;
        }
        .detail{
            width: 300px;
            height: 50px;
            margin-top: 20px;
            background-color: orange;
            color: white;
            font-size: 20px;
            border: none;
        }
        .zhuce{
            text-decoration:none;
            color: gray;
            line-height: 40px;
            margin-left: 35px;

        }
        a{text-decoration:none}
        .bottom{
            width: 300px;
            height: 150px;
        }
        .nav-bottom{
            display: inline-block;
            margin-top: 20px;
            height: 40px;
            color: rgb(121, 110, 110);
        }
        .left,.right{
            display: inline-block;
            width: 97px;
            height: 2px;
            background-color: rgb(121, 110, 110);
        }
        .foot{
            height: 90px;
            margin-left: 82.5px;
        }
        .foot a{
            position: relative;
            display: inline-block;
            width:30px;
            height:30px;
            background:#333;
            border-radius: 50%;
        }
        .foot span{
            display: inline-block;
            position: absolute;
            margin:auto;
            width: 18px;
            height: 18px;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("${pageContext.request.contextPath }/statics/img/icons_type.png") no-repeat;

        }
        .foot .one{
            background-position: -20px 0;
        }
        .foot .two{
            background-position: -38px 0;
        }
        .foot .three{
            background-position: -57px 0;
        }
        .foot .four{
            background-position: -84px 0;
            width:24px;
        }
        .header{
            width: 100%;
            height: 100px;
            position: relative;
        }
        .header>img{
            height: 60px;
           /*background-color: orangered;*/
            position: absolute;
            top: 20px;
            left: 80px;
        }
        .header>h1{
            position: absolute;
            top: 15px;
            left: 150px;
        }
        .header>p{
            position: absolute;
            top: 61px;
            left: 150px;
            font-size: 10px;
        }
        .pic{
            background :url("${pageContext.request.contextPath }/statics/img/aa.jpg") no-repeat  ;
            background-size: 112% 600px;
            height: 700px;

            margin-right: 0px;
            position: relative;
        }
        .left-one{
            position: absolute;
            left: 70%;
            top: 50px;
        }
        .underside{
            width: 100%;
            height: 100px;
            text-align: center;
        }
        .underside>a{
            text-decoration: none;
            font-size: 20px;
            color:#333;
            margin-left: 10px;
        }
        .underside>p{
            margin-top: 10px;
            color: gray;
        }
        .guohui{
            display: inline-block;
            height: 15px;
            width: 15px;
            background-color: orangered;
        }
        .login.left{
            float: left;
            margin-left: 20px;
        }
        .sp{
            margin-top: 10px;

        }
       .nav-bottom{
            margin-top: 40px;
        }
        .foot{
            margin-top: 20px;
        }


    </style>
</head>
<body>

    <div class="header">
        <img src="${pageContext.request.contextPath }/statics/img/gg.jpg"  alt="">
        <h1>HOME</h1>
        <p>让每个人都能拥有一个温暖的家</p>
    </div>
    <div class="pic">
        <div class="content left-one">
            <div class="nav-center center">
                <span class="zhanghao">账号登陆</span>
                |
                <span class="ma">扫码登录</span>
            </div>
            <div class="face center">
                <div class="logn">
                    <div class="middle">
                        <form class="form center" action="${pageContext.request.contextPath }/doLogin" method="post">
                            <input class="text" type="text" placeholder="手机号" name="uPhone"  id="detai">
                            <%--<input type="hidden" name="userPwd"  value="${user.uPassword}" class="userPwd">--%>
                            <input class="password" type="password" placeholder="密码" name="uPassword"> <br>
                            <input class="detail" type="submit" value="登录" /><br/>
                            <div class="sp">
                            <input type="checkbox" name="rember" value="rember" ${auto==false ? '':'checked' }/>自动登录
                            <a href="${pageContext.request.contextPath }/reg">注册账号</a>|
                            <a href="${pageContext.request.contextPath }/update">忘记密码？</a>
                            </div>
                        </form>
                        <div class="zhuce">
                            </div>
                    </div>
                    <div class="bottom center">
                        <div class="nav-bottom">
                            <span class="left"></span>
                            其他方式登陆
                            <span class="right"></span>
                        </div>
                        <div class="foot">
                            <a href="#"><span class="one"></span></a>
                            <a href="#"><span class="two"></span></a>
                            <a href="#"><span class="three"></span></a>
                            <a href="#"><span class="four"></span></a>
                        </div>
                    </div>
                </div>
                <div class="saoma center">
                    <img src="${pageContext.request.contextPath }/statics/img/下载.png" alt="">
                    <p class="detail-one">使用小米商城APP扫一扫<br>小米手机可打开「设置」>「小米帐号」扫码登录</p>
                </div>
            </div>
        </div>
    </div>
    <div class="underside">
        <a href="#">简体</a> |
        <a href="#">繁体</a> |
        <a href="#">English</a> |
        <a href="#">常见问题</a> |
        <p>HOME公司版权所有-京ICP备10046444- <img class="guohui" src="${pageContext.request.contextPath }/statics/img/国徽.png" alt=""> 京公网安备11010802020134号-京ICP证110507号</p>
    </div>
    <%--<script>--%>
        <%--$(".nav-center span").click(function(){--%>
            <%--$(this).addClass("zhanghao").siblings().removeClass("zhanghao")--%>
            <%--let index = $(this).index();--%>
            <%--console.log(login)--%>
            <%--$(".face>div").eq(login).show().show().siblings().hide()--%>
        <%--})--%>
    <%--</script>--%>

</body>
</html>